<template>
    <el-row :gutter="20">
        <el-col :span="12">
            <el-button type="primary" :icon="CirclePlus" @click="onEdit(0)">添加</el-button>
        </el-col>
    </el-row>
    <el-divider />
    <el-table class="mt20" :data="tableData" style="width: 100%">
        <el-table-column prop="supplier" label="比价班组名称" align="center" />
        <el-table-column prop="supplier_personal" label="联系人" align="center" />
        <el-table-column prop="consult_price" label="询价金额" align="center" />
        <el-table-column prop="consult_date" label="询价日期" align="center" />
        <el-table-column prop="quotation_price" label="报价金额" align="center" />
        <el-table-column prop="quotation_date" label="报价日期" align="center" />
        <el-table-column prop="pay_type" label="付款方式" align="center" />
        <el-table-column label="所属项目" show-overflow-tooltip align="center">
            <template #default="scope">
                <el-text>{{scope.row.project.title}}</el-text>
            </template>
        </el-table-column>
        <el-table-column label="操作人" show-overflow-tooltip align="center">
            <template #default="scope">
                <el-text>{{scope.row.user.name}}</el-text>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="isEdit" title="询价比价操作" width="30%">
        <component :is="contrastForm" :data = editId :labor_id = id @onSave="onSave" />
    </el-dialog>

    <el-dialog v-model="isApply" title="申请采购" width="30%">
        <component :is="applyForm" model = "LaborContrast" source = "LaborContrast" type = "apply" :id = editId @onApplySave="onApplySave" />
    </el-dialog>

    <el-dialog v-model="isApplyRecord" title="申请进度" width="50%">
        <component :is="applyRecord" :id = editId />
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { CirclePlus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import contrastForm from './components/contrastForm.vue';
import http from '../../../util/request';
import applyForm from "@/components/applyForm.vue";
import applyRecord from "@/components/applyRecord.vue";
const id:any = ref(useRouter().currentRoute.value.params.id)
// const applyId = ref<number>(0)
const isEdit = ref<boolean>(false)
const editId = ref<number>(0)
const isApply = ref(false)
const isApplyRecord = ref(false)
    
interface RuleForm {
    id:number
    labor_id: number
    supplier: string
    supplier_personal: string
    consult_price: number
    consult_date: string
    quotation_price: number
    quotation_date: string
    delivery: string
    pay_type: string
    application:any
}

const tableData = ref<RuleForm[]>()

const onEdit = (id:number) => {
    editId.value = id
    isEdit.value = true
}

const onGetData = () => {
    http.post('/labor/contrast',{}).then((response:any)=>{
        tableData.value = response.data.data
    })
}

// const onApply = () => {
//     editId.value = id.value
//     isApply.value = true
// }

// const onApplyRecord = () => {
//     editId.value = applyId.value
//     isApplyRecord.value = true
// }

const onSave = () => {
    onGetData()
    isEdit.value = false
    editId.value = 0
}

onMounted(()=>{
    onGetData()
})

const onApplySave = () => {
    isApply.value = false
    onGetData()
}
</script>
<style scoped>
</style>
